<template>
  <view>
    <search></search>
    <!-- 搜索结果展示 -->
    <view v-if="goodsList.length">
      <view class="searchResult" v-for="item in goodsList" :key="item.gid">
        <!-- v-if和v-for不能同时存在 -->
        <view>
          <view class="title">
            <view style="font-weight: bold; color: #000; font-size: 36rpx">{{ item.branch_shop_name }}</view>
            <view>{{ item.distance }}</view>
          </view>
          <view class="goodsContain">
            <img :src="item.image" alt="" />
            <view class="goodsInfo">
              <view>{{ item.title }}</view>
              <view>销量: {{ item.sales }}</view>
              <view>￥{{ item.price }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-else class="absent">没有相关的商品!</view>
  </view>
</template>

<script>
import search from '@/components/search'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      // 查询商品的参数
      query: {
        kwords: '',
        lng: 0, // 经度
        lat: 0, // 维度
        page: 1
      }
    }
  },
  components: {
    search
  },
  onLoad(ops) {
    this.query.kwords = ops.kwords
    this.getData()
  },
  methods: {
    getData() {
      this.$store.dispatch('getGoodsList', this.query)
    }
  },
  computed: {
    ...mapState({
      goodsList: (state) => state.search.goodsList
    })
  }
}
</script>

<style lang="less" scoped>
.searchResult {
  height: 300rpx;
  border-bottom: 1px solid #eee;
  padding: 0 50rpx;
  color: #666666;
  font-size: 30rpx;

  .title {
    display: flex;
    justify-content: space-between;
    padding-top: 25rpx;
  }
}

.goodsContain {
  display: flex;
  margin-top: 25rpx;

  img {
    width: 150rpx;
    height: 150rpx;
    border-radius: 3px;
  }

  .goodsInfo {
    margin-left: 30rpx;

    view:nth-child(1) {
      margin-bottom: 20rpx;
      color: #000;
      font-weight: bold;
    }
    view:nth-child(3) {
      margin-top: 10rpx;
      color: #f14f4a;
    }
  }
}

.absent {
  display: flex;
  justify-content: center;
}
</style>
